<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 多列等高如何实现？</title>
<style type="text/css">
	.Article {
	  overflow: hidden;
	}
	
	.Article>li {
	  float: left;
	  margin: 0 10px -9999px 0;
	  padding-bottom: 9999px;
	  background: #4577dc;
	  width: 200px;
	  color: #fff;
	}
	
	.Article>li>p {
	  padding: 10px;
	}
</style>
</head>
<body>
<pre>
（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:
hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则
父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。

（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度
的特性，来实现多列等高。
</pre>



  <ul class="Article">
    <li class="js-article-item">
      <p>
      一家将客户利益置于首位的经纪商，
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
      </p>
    </li>
    <li class="js-article-item">
      <p>一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
      一家将客户利益置于首位的经纪商，为客户提供专业的交易工具</p>
    </li>
    <li class="js-article-item">
      <p>一家将客户利益置于首位的经纪商</p>
    </li>
  </ul>
	<div>好的</div>


<script type="text/javascript">

</script>
</body>
</html>
